<template>
  <div class="main">
    <div class="list">
      <el-button type="primary" icon="el-icon-plus" class="add" @click="openForm(null, 'add')">新增简历</el-button>
      <el-card class="box-card" v-for="item in resumeList" :key="item.id">
        <div slot="header" class="clearfix">
          <span>{{ item.name }} </span>
        </div>
        <el-button class="edit" type="text" @click="deleteResume(item.id)" icon="el-icon-delete">删除</el-button>
        <el-button class="edit" type="text" @click="openForm(item, 'edit')" icon="el-icon-edit">编辑</el-button>
        <el-button class="edit" type="text" @click="openDetail(item)" icon="el-icon-view">查看</el-button>
        <p>创建时间：{{ item.createTime }}</p>
      </el-card>
    </div>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page.sync="current"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
      hide-on-single-page
      :page-sizes="[1, 10, 15, 20, 25, 30, 50, 80, 100]">
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['id']),
  },
  data() {
    return {
      resumeList: [],
      current: 1,
      size: 10,
      total: 0,
    }
  },
  mounted() {
    this.getResumeList()
  },
  methods: {
    // 获取简历列表
    getResumeList() {
      this.$store.dispatch('resume/lookResumeListForUser', { current: this.current, size: this.size, userId: this.id }).then((response) => {
        this.resumeList = response.data
        this.total = parseInt(response.other.pageSize)
      })
    },
    openDetail(item, type) {
      this.$router.push({
        path: '/resume',
        query: {
          id: item.id,
          type: type,
        },
      })
    },
    openForm(item, type) {
      this.$router.push({
        path: '/editResume',
        query: { id: item ? item.id : null, type: type },
      })
    },
    //  更改每页大小
    changePageSize(val) {
      this.size = val
      this.getResumeList()
    },
    //  更改当前显示页码
    changeCurrentPage(val) {
      this.current = val
      this.getResumeList()
    },
    // 删除简历
    deleteResume(id) {
      this.$confirm('确定删除该简历吗？删除后不可恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$store.dispatch('resume/deleteResume', id).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '删除成功!',
              showClose: true,
            })
            this.getResumeList()
          }
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  margin-top: 70px;
  border: 1px solid white;
  width: 80%;
  height: 83vh;
  margin-left: 10%;
  overflow: auto;
  .list {
    height: 85%;
    overflow: auto;
    .box-card {
      width: 80%;
      margin-left: 10%;
      margin-top: 5%;
      .edit {
        float: right;
        margin-left: 1%;
      }
    }
    .add {
      float: right;
    }
  }
}
</style>
